<template>
    <div class="form-container">
      <div class="form-item">
        <div class="item-title">选择区域</div>
        <div class="input-area">
          <el-select
            v-model="code[0]"
            placeholder="选择省"
            @change="(val) => getCityOrZone(val, 0)"
          >
            <el-option
              v-for="(item, index) in allProvince"
              :key="index"
              :value="item.code"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <el-select
            style="margin-left: 10px;"
            v-model="code[1]"
            placeholder="选择市"
            :disabled="!code[0]"
            @change="(val) => getCityOrZone(val, 1)"
          >
            <el-option
              v-for="(item, index) in allCity"
              :key="index"
              :value="item.code"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <el-select
          style="margin-left: 10px;"

            v-model="code[2]"
            :disabled="!code[1]"
            placeholder="选择区县"
          >
            <el-option
              v-for="(item, index) in allZone"
              :key="index"
              :value="item.code"
              :label="item.name"
            >
            </el-option>
          </el-select>
          <el-button
           style="margin-left: 10px;"
            type="primary"
            @click="addArea"
            >确定选择</el-button
          >
        </div>
        <div class="tags">
          <el-tag
            round
            type="info"
            effect="dark"
            :closable="true"
            style="margin-right: 10px; margin-bottom: 3px;"
            @close="(val) => delArea(val, item)"
            v-for="(item, index) in allTags"
            :key="index"
            >{{ item.map((item) => item.name).join("-") }}</el-tag
          >
        </div>
      </div>
      <div class="form-item">
        <el-form
          :inline="true"
          :model="form"
          ref="formRef"
        >
          <el-form-item label="信息费">
            <div class="fee">
              <el-input v-model="form.informationFee"></el-input
              >{{ "&nbsp&nbsp&nbsp" }}元
            </div>
          </el-form-item>
          <el-form-item label="保险费">
            <div class="fee">
              <el-input v-model="form.insurancePremium"></el-input
              >{{ "&nbsp&nbsp&nbsp" }}元
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-item">
        <div class="item-title" style="margin-bottom: 10px;">顺风车计价规则设置</div>
      </div>
      <div class="form-items">
        <el-form
          :model="form"
          ref="formRef1"
          label-width="100px"
        >
          <el-form-item label="等待费">
            <div class="text-area">
              司机到达起点{{ "&nbsp" }}
              <el-input
                style="width: 80px"
                v-model="form.kcWaitForTime"
              ></el-input
              >{{ "&nbsp&nbsp&nbsp" }} 分钟后计算等待费 {{ "&nbsp"
              }}<el-input
                style="width: 80px"
                v-model="form.kcWaitForPrice"
              ></el-input
              >{{ "&nbsp&nbsp" }} 元/分钟
            </div>
          </el-form-item>
          <el-form-item label="添加时间段" style="margin-left: 28px;">
            <div class="text-area">
              {{ "&nbsp" }}
              <el-input
                style="width: 80px"
                v-model="starttimes"
                placeholder="开始时间"
              ></el-input>
              {{ "&nbsp" }}
              <el-input
                style="width: 80px"
                v-model="endtimes"
                placeholder="结束时间"
              ></el-input>
              {{ "&nbsp" }}
              {{ "&nbsp" }}
              {{ "&nbsp" }}
              <el-button style="width: 75px;
               height: 32px;
               background-color: rgb(22,155,213);
               border: none;
               border-radius: 5px;
               color: white;
               "
               @click="btnss">
                    确认
               </el-button>
             
            </div>
          </el-form-item>
          <div class="tags" style="margin-left: 43px; height: 13px !important;">
              <el-tag
                round
                type="info"
                effect="dark"
                :closable="true"
                style="margin:0 10px 4px 0; height: 5px !important;"
                @close="(val) => delstartend(val, item)"
                v-for="(item, index) in startendtime"
                :key="index"
                >{{ item[0] }}-{{ item[1] }}</el-tag
              >
            </div>  
          <el-form-item label="添加公里数范围" label-width="110px" style="margin-left: 45px;">
            <div class="text-area">
              {{ "&nbsp" }}
              <el-input
                style="width: 95px;"
                v-model="startmi"
                placeholder="起始公里数"
              ></el-input>
              {{ "&nbsp" }}
              <el-input
                style="width: 95px"
                v-model="endmi"
                placeholder="结束公里数"
              ></el-input>
              {{ "&nbsp" }}
              {{ "&nbsp" }}
              {{ "&nbsp" }}
              <el-button style="width: 75px;
               height: 32px;
               background-color: rgb(22,155,213);
               border: none;
               border-radius: 5px;
               color: white;
               "
               @click="btnfanwei">
                    确认
               </el-button>
             
            </div>
          </el-form-item>
          <div class="tagss" style="margin-left: 43px; height: 13px !important;">
              <el-tag
                round
                type="info"
                effect="dark"
                :closable="true"
                style="margin:0 10px 4px 0; height: 5px !important;"
                @close="(val) => delstartendmi(val, item)"
                v-for="(item, index) in startendmi"
                :key="index"
                >{{ item[0] }}-{{ item[1] }}</el-tag
              >
            </div>  
            <div class="rong">
              <el-button style="width: 120px;
               height: 35px;
               background-color: rgb(22,155,213);
               border: none;
               border-radius: 5px;
               color: white;
               "
               @click="btnss">
                    立即生成计价表
               </el-button>
               <div>注：星期（1-7），时间段，人数（最多6人），公里范围进行组合，设置每个组合的价格</div>
            </div>
            <el-table
              :data="tableData"
              :span-method="objectSpanMethod"
              border
              style="width: 100%; margin-top: 20px"
              class="tab"
            >
              <el-table-column prop="id" label="星期" width="180" />
              <el-table-column prop="name" label="时间段" />
              <el-table-column prop="amount1" label="人数" />
              <el-table-column prop="amount2" label="公里范围" />
              <el-table-column prop="amount3" label="价格 （公里/元）" />
            </el-table>
            {{ "&nbsp" }}
            {{ "&nbsp" }}
            {{ "&nbsp" }}
            <el-button style="width: 75px;
              height: 32px;
              background-color: rgb(22,155,213);
              border: none;
              border-radius: 5px;
              color: white;
              margin: 20px 0 0 16px;
              "
              @click="btnss">
                  保存
              </el-button>
        </el-form>
      </div>
    </div>
  </template>
  <script setup name="Rules-adds">
  import { getRegionChildren, addRules } from "@/api/system/rules";
import { ref } from "vue";
  
  const { proxy } = getCurrentInstance();
  const tableData = ref([
  {
    id: '星期一',
    name: '时间段',
    amount1: '1',
    amount2: '0-3',
    amount3: 10,
  },
  {
    id: '星期一',
    name: '时间段',
    amount1: '1',
    amount2: '0-3',
    amount3: 10,
  },
  {
    id: '星期一',
    name: '时间段',
    amount1: '1',
    amount2: '0-3',
    amount3: 10,
  },
  {
    id: '星期一',
    name: '时间段',
    amount1: '1',
    amount2: '0-3',
    amount3: 10,
  },
  {
    id: '星期一',
    name: '时间段',
    amount1: '1',
    amount2: '0-3',
    amount3: 10,
  },
  {
    id: '星期一',
    name: '时间段',
    amount1: '1',
    amount2: '0-3',
    amount3: 10,
  },
  {
    id: '星期一',
    name: '时间段',
    amount1: '1',
    amount2: '0-3',
    amount3: 10,
  },
  ]);
  
  const code = ref([]);
  const allTags = ref([]);
  //时间历史记录
  const alltagstime = ref([]);
  //开始时间
  const starttimes = ref('');
  const endtimes  = ref('');
  //开始时间和结束时间组合
  const startendtime = ref([]);

  const startmi = ref('');
  const endmi = ref('');
  const startendmi = ref([]);
  
  const timeList = reactive({
    endTime: "",
    exceedingDuration: "",
    exceedingDuration: "",
    exceedingDuration: "",
    exceedingDuration: "",
  });
  const endTime = ref();
  const exceedingDuration = ref();
  const exceedingMileage = ref();
  const startTime = ref();
  const startingIncludesDuration = ref();
  const startingIncludesKilometers = ref();
  const startingPrice = ref();
  const thBelowKilometers = ref();
  const thDiscountedMileage = ref();
  const thOverKilometers = ref();
  const timePeriodName = ref();
  
  const data = reactive({
    form: {
      code: [],
      timePeriodList: [],
    },
    allProvince: [],
    allCity: [],
    allZone: [],
  });
  
  const { form, allProvince, allCity, allZone } = toRefs(data);
  
  onMounted(() => {
    if (proxy.$route.query.form) {
      form.value = JSON.parse(proxy.$route.query.form);
      form.value.code = form.value.code.split(",");
    }
  });


  //添加时间段
  function btnss(){
    console.log(starttimes.value,endtimes.value,'开始时间和结束时间')
    if(starttimes.value.length > 0 && endtimes.value.length > 0){
      startendtime.value.push([starttimes.value, endtimes.value])
      console.log(startendtime.value,'startendtime开始时间和结合时间组合')
    }
  }

  //添加公里数
  function btnfanwei(){
    if(startmi.value.length > 0 && endmi.value.length > 0){
      const zuhe = [startmi.value,endmi.value]  
      startendmi.value.push(zuhe)
      console.log(startendmi.value,'公里数组合')
    }
  }

  function delArea(e, index) {
    console.log(index,'删除的参数paramsimdex')
    allTags.value = allTags.value.filter((item) => item != index);
    form.value.code = form.value.code.filter((item) => item != index[2].code);
  }
  
   //删除开始时间和结束时间的组合
   function delstartend(e,index){
        const newarr = startendtime.value.filter(item => item != index)
        this.startendtime = newarr
   }

   //删除公里历史记录
   function delstartendmi(e,index){
       const newarr = startendmi.value.filter(item => item != index)
       this.startendmi = newarr
   }
  
  function getProvince() {
    getRegionChildren(0).then((res) => {
      allProvince.value = res.data;
    });
  }
  
  function getCityOrZone(id, type) {
    if (type == 0)
      getRegionChildren(id).then((res) => {
        allCity.value = res.data;
      });
    else
      getRegionChildren(id).then((res) => {
        allZone.value = res.data;
      });
  }
  
  function addArea() {
    if (allTags.value.find((item) => item[2].code == code.value[2])) {
      proxy.$modal.msgError("已有该区域");
      return;
    }
    allTags.value.push([
      allProvince.value.find((item) => item.code == code.value[0]),
      allCity.value.find((item) => item.code == code.value[1]),
      allZone.value.find((item) => item.code == code.value[2]),
    ]);
    form.value.code.push(code.value[2]);
    code.value = [];
    allCity.value = [];
    allZone.value = [];
  }
  
  function addTime() {
    form.value.timePeriodList.push({
      endTime: endTime.value,
      exceedingDuration: exceedingDuration.value,
      exceedingMileage: exceedingMileage.value,
      startTime: startTime.value,
      startingIncludesDuration: startingIncludesDuration.value,
      startingIncludesKilometers: startingIncludesKilometers.value,
      startingPrice: startingPrice.value,
      thBelowKilometers: thBelowKilometers.value,
      thDiscountedMileage: thDiscountedMileage.value,
      thOverKilometers: thOverKilometers.value,
      timePeriodName: timePeriodName.value,
    });
  }
  
  
  function delTime(index) {
    form.value.timePeriodList = form.value.timePeriodList.filter(
      (item) => item != index
    );
  }
  
  function submit() {
    console.log(form.value,'新增传递的参数');
    if (!form.value.code) {
      console.log(form.value,'没有选择区域')
      proxy.$modal.msgError("请选择区域");
      return;
    }
    if (form.value.timePeriodList.length == 0) {
      console.log(form.value,'没有选择时间')
      proxy.$modal.msgError("请选择时间段");
      return;
    }
    form.value.code = form.value.code.join(",");
    if (form.value.ruleId != null) {
    } else {
      addRules(form.value).then((res) => {
        proxy.$modal.msgSuccess("新增成功");
        proxy.$router.push({ path: "/rules-manage/rules" });
      });
    }
    form.value.code = [];
  }
  
  function cancel() {
    proxy.$router.push({ path: "/rules-manage/rules" });
  }
  
  getProvince();
  </script>
  <style scoped lang="scss">
  .rong{
    width: 80%;
    // background-color: red;
    margin-left: 44px;
    display: flex;
    justify-items: end;
    align-items: end;
    div{
      margin-left: 15px;
    }
  }
  .form-container {
    margin: 15px;
    padding: 45px;
    .form-item {
      border-bottom: 1px solid #444;
      margin-bottom: 20px;
      .item-title {
        color: #555;
        font-weight: bolder;
        margin-bottom: 10px;
      }
      .input-area {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        width: 780px;
        .el-select__wrapper {
          margin-right: 20px;
        }
      }
      .text-area {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #555;
      }
      .tags {
        margin-bottom: 40px;
        .el-tag--dark.el-tag--info {
          padding: 18px;
          font-size: 14px;
        }
      }
      .tagss {
        margin-bottom: 40px;
        .el-tag--dark.el-tag--info {
          padding: 18px;
          font-size: 14px;
        }
      }
      .fee {
        display: flex;
      }
    }
    .form-items {
      // border-bottom: 1px solid #444; 
      margin-bottom: 20px;
      .item-title {
        color: #555;
        font-weight: bolder;
        margin-bottom: 10px;
      }
      .input-area {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        width: 780px;
        .el-select__wrapper {
          margin-right: 20px;
        }
      }
      .text-area {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #555;
      }
      .tags {
        margin-bottom: 40px;
        .el-tag--dark.el-tag--info {
          padding: 18px;
          font-size: 14px;
        }
      }
      .tagss {
        margin-bottom: 40px;
        .el-tag--dark.el-tag--info {
          padding: 18px;
          font-size: 14px;
        }
      }
      .fee {
        display: flex;
      }
    }
  }

  .tab{
    margin:20px 0 0 43px;
  }
 
  </style>
  